<template>
  <div class="bedtable_list">
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="床位编号">
        <el-input
          v-model="listFrom.bednumber"
          placeholder="输入床位编号进行查询"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" :icon="Search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-popconfirm
          title="此操作不可逆，确定要删除所选床位吗?"
          @confirm="onDelete()"
        >
          <template #reference>
            <el-button type="info">删除选中</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column property="bednumber" label="床位编号" align="center" />
      <el-table-column property="department" label="所属科室" align="center" />
      <el-table-column property="nurse" label="责任护士" align="center" />
      <el-table-column property="oxygen" label="配备氧气罐" align="center" />
      <el-table-column property="heart" label="配备心电机" align="center" />
      <el-table-column property="breath" label="配备呼吸机" align="center" />
      <el-table-column property="icu" label="配备急救设备" align="center" />
      <el-table-column
        property="aircondition"
        label="空调地暖"
        align="center"
      />
      <el-table-column property="tv" label="电视外设" align="center" />
      <el-table-column label="床位操作" align="center">
        <template #default="scope">
          <el-popconfirm
            title="此操作不可逆，确定要删除该床位吗?"
            @confirm="deleteAccount(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete" />
            </template>
          </el-popconfirm>

          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="editAccount(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="fenyeqi">
      <el-pagination
        v-model:current-page="listFrom.page"
        v-model:page-size="listFrom.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <!-- 详情页弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="床位管理"
      width="35%"
      align-center
    >
      <el-form :model="bedtableList" label-width="120px">
        <el-form-item label="床位编号">
          <el-input v-model="bedtableList.bednumber" disabled />
        </el-form-item>
        <el-form-item label="所属科室">
          <el-select v-model="bedtableList.department">
            <el-option label="急诊科" value="急诊科" />
            <el-option label="妇产科" value="妇产科" />
            <el-option label="神经科" value="神经科" />
            <el-option label="脑外科" value="脑外科" />
          </el-select>
        </el-form-item>
        <el-form-item label="氧气罐">
          <el-radio-group v-model="bedtableList.oxygen">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="心电机">
          <el-radio-group v-model="bedtableList.heart">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="呼吸机">
          <el-radio-group v-model="bedtableList.breath">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="急救设备">
          <el-radio-group v-model="bedtableList.icu">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="空调地暖">
          <el-radio-group v-model="bedtableList.aircondition">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电视外设">
          <el-radio-group v-model="bedtableList.tv">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="责任护士">
          <el-input v-model="bedtableList.nurse" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认编辑</el-button>
          <el-button type="info" @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { watchEffect, reactive, ref } from "vue";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {
  bedtableListReq,
  bedtableSearchReq,
  bedtableDelReq,
  bedtableBatchdelReq,
  bedtableEditReq,
} from "@/api/bedtable.api";
// 搜索栏数据
const listFrom = reactive({
  page: 1,
  size: 10,
  bednumber: "",
});
//弹框数据
const bedtableList = reactive({
  bednumber: "",
  department: "",
  oxygen: null,
  heart: null,
  breath: null,
  icu: null,
  aircondition: null,
  tv: null,
  nurse: "",
  id: null,
});
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
// 多个删除数据
const ids = ref<any>([]);
// 弹框开关
const dialogVisible = ref(false);
// 查询
const onSearch = async () => {
  if (listFrom.bednumber == "") {
    ElMessage.error("请输入要查询的床位编号！");
    return;
  }
  const res = await bedtableSearchReq(listFrom);
  // console.log(res, "999");
  if (res.data.data.length == 0) {
    ElMessage.error("没有查询到对应床位编号的数据！");
  }
  tableData.value = res.data.data;
  total.value = res.data.total;
};
// 单选框选中值
const handleSelectionChange = (val) => {
  // console.log(val);
  ids.value = JSON.parse(JSON.stringify(val)).map((item) => item.id);
};
// 删除多个
const onDelete = async () => {
  if (ids.value.length == 0) {
    ElMessage.error("请勾选要删除的床位！");
    return;
  }
  ids.value = JSON.stringify(ids.value);
  const res = await bedtableBatchdelReq({ ids: ids.value });
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
// 删除单个
const deleteAccount = async (id) => {
  const res = await bedtableDelReq({ id });
  console.log(res);
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
// 编辑
const editAccount = (row) => {
  dialogVisible.value = true;
  bedtableList.bednumber = row.bednumber;
  bedtableList.department = row.department;
  bedtableList.oxygen = row.oxygen == "√" ? "1" : "0";
  bedtableList.heart = row.heart == "√" ? "1" : "0";
  bedtableList.breath = row.breath == "√" ? "1" : "0";
  bedtableList.icu = row.icu == "√" ? "1" : "0";
  bedtableList.aircondition = row.aircondition == "√" ? "1" : "0";
  bedtableList.tv = row.tv == "√" ? "1" : "0";
  bedtableList.nurse = row.nurse;
  bedtableList.id = row.id;
  // console.log(bedtableList);
};
// 确认编辑
const onSubmit = async () => {
  const res = await bedtableEditReq(bedtableList);
  // console.log(res, "lk");
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
    dialogVisible.value = false;
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
//获取列表
const getList = async () => {
  const res = await bedtableListReq(listFrom);
  // console.log(res, "ccccc");
  tableData.value = res.data.data;
  tableData.value = tableData.value.map((item) => ({
    ...item,
    oxygen: item.oxygen === 1 ? "√" : "×",
    heart: item.heart === 1 ? "√" : "×",
    breath: item.breath === 1 ? "√" : "×",
    icu: item.icu === 1 ? "√" : "×",
    aircondition: item.aircondition === 1 ? "√" : "×",
    tv: item.tv === 1 ? "√" : "×",
  }));
  total.value = res.data.total;
};
watchEffect(getList);
</script>

<style scoped lang="scss">
.bedtable_list {
  width: 100%;
  height: 100%;
  .fenyeqi {
    margin-top: 20px;
  }
}
</style>
